<template>
  <el-descriptions
    :title="descOption.title || ''"
    :border="descOption.border || false"
    :column="descOption.col || 3"
    :direction="descOption.direction || 'horizontal'"
    :label-width="descOption.labelWidth || 60"
    :class="[descOption.border && descOption.labelBack ? 'labelClass' : '']"
  >
    <el-descriptions-item
      v-for="(item, index) in descOption.columns"
      :key="index"
      :label="item.label"
      :align="item.align || 'left'"
      :label-align="item.labelAlign || 'left'"
      :span="item.span"
      :width="item.width"
    >
      <el-text v-if="!item.slot" :line-clamp="item.lineClamp" :style="{cursor: item.lineClamp ? 'pointer' : ''}">
          {{ descFormState[item.prop] }}
      </el-text>
      <!-- 自定义插槽 -->
      <el-text v-if="item.slot" :line-clamp="item.lineClamp" :style="{cursor: item.lineClamp ? 'pointer' : ''}">
        <slot :name="item.prop + 'Form'"></slot>
      </el-text>
    </el-descriptions-item>
  </el-descriptions>
</template>

<script lang="ts" setup>
const props = defineProps({
  modelValue: {
    type: Object,
    default: () => {},
  },
  descOption: {
    type: Object,
    default: () => {},
  },
});
const { modelValue, descOption } = toRefs(props);

// 计算双向绑定的值
const descFormState = computed({
  get() {
    return modelValue.value;
  },
  set(value) {
    emit("update:modelValue", value);
  },
});
</script>

<style lang="scss" scoped>
.labelClass {
  :deep(.el-descriptions__label.el-descriptions__cell.is-bordered-label) {
    background: #fff !important;
  }
}
</style>